import React, { useEffect, useState } from 'react';
import { Modal, Button } from 'antd';
import { getStore } from 'store/store';
import './index.scss';

/**
 * 弹窗-用户告知
 * @param props
 * @returns
 */
export const UserNotice = () => {
  const [show, setShow] = useState(false);
  const store = getStore();

  useEffect(() => {
    const isRead = store.get('hasReadNotice');
    if (!isRead) {
      // 默认-未读
      setShow(true);
    }
  }, [store]);
  // 操作ok后，更新入缓存，避免每次都弹出
  const doReadNotice = () => {
    store.set('hasReadNotice', true);
    store.save();
  };
  // 按钮-ok
  const handleOk = () => {
    setShow(false);
    doReadNotice();
  };
  // 按钮-cancel
  const handleCancel = () => {
    // 暂无
    // setShow(false);
  };

  return (
    <Modal
      className="notice-modal"
      title="温馨提示"
      visible={show}
      onOk={handleOk}
      onCancel={handleCancel}
      closable={false}
      footer={
        <Button type="primary" onClick={handleOk}>
          我知道了
        </Button>
      }
    >
      <div className="box">
        <p>严格遵守用户个人信息保护相关规定</p>
        <p>
          第一条 收集用户个人信息前须征得用户同意。 <br />
          第二条 不得收集使用与工作无关的用户个人信息。 <br />
          第三条 不得拍摄电脑终端屏幕上的用户个人信息。 <br />
          第四条 不在本地电脑终端存储用户个人信息。 <br />
          第五条 不得通过公网即时通信工具传递用户个人信息。
          <br />
          第六条 不得将用户个人信息透露给无关人员。 <br />
          第七条 用户个人信息使用完毕后须遵照相关规定及时删除。
          <br />
          第八条 批量导出用户个人信息需严格审批和记录。 <br />
          第九条 一人一账号，不得转让或共用。开展账号行为定期审核审计。
        </p>
      </div>
    </Modal>
  );
};
